// out: ../css/

@import "./base.less";
@vw: 3.75vw;

.background {
    background: #f9fafb;
    // height: 800px;
}

header {
    height: (50 / @vw);
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    justify-content: space-between;
    padding-right: (15/@vw);
    background-color: white;

    // 左边
    .logo {
        display: block;
        width: (235 / @vw);
        height: (50 / @vw);

        img {
            width: 100%;
            height: 100%;
        }
    }

    a {
        width: (80 / @vw);
        height: (30 / @vw);
        background-color: #ffe31b;
        border-radius: (15 / @vw);
        text-align: center;
        line-height: (30 / @vw);
        font-size: (14/@vw);

    }
}

//   底部安装
footer {
    position: fixed;
    margin-left: (19/@vw);
    margin-right: (19/@vw);
    top: 600px;
    width: (345 / @vw);
    height: (45 / @vw);
    background-color: white;
    border-radius: (345/2 / @vw);
    padding-left: 15px;

    .ku {
        position: relative;
        width: (36 / @vw);
        padding-right: (15/@vw);
        justify-content: center;
    }

    .txt {
        position: relative;
        top: (2/@vw);
        text-align: center;
        margin-right: (50/@vw);
    }

    .icon {
        position: relative;
        width: (28 / @vw);
        top: (10/@vw);
        background-color: #f2f3f5;
        border-radius: 50%;
        padding: 7px;
    }
}

.search {
    margin-top: (55/@vw);
    margin-left: (10/@vw);
    width: (345/@vw);
    height: (32/@vw);
    border-radius: (16/@vw);
    background-color: #f2f4f5;
    text-align: center;

    img {
        width: (16/@vw);
        height: (16/@vw);
        position: relative;
        top: (3/@vw);
        fill: #bcbec8;
    }

    span {
        position: relative;
        color: #bcbec8;
        top: (5/@vw);
    }
}

// banner
.banner {
    margin-top: (10/@vw);  
      margin-left: (10/@vw);
    img {
        width: (345/@vw);
        top: (90/@vw);
        left: (16/@vw);
        border-radius: (10/@vw);
    }
}

// 排行榜
.list {
    margin-top: (10/@vw);  
    margin-left: (10/@vw);
    display: flex;
    left: (16/@vw);
    width: (345/@vw);
    height: (26.5/@vw);
    h2 {
        margin-right: (180/@vw);
    }

    p {
        color: #bcbec8;
        position: relative;
        top: (5/@vw);
    }

    .arrow {
        width: (15/@vw);
        fill: #bcbec8;
        ;
        position: relative;
        top: (2/@vw);
    }

}

// 热歌榜
.hot {
    width: (345/@vw);
    display: flex;
    margin-top: (10/@vw);  
    margin-left: (10/@vw);
    top: (110 /@vw);
    margin-right: (16/@vw);
    left: (16/@vw);
    background-color: white;
    border-radius: (10/@vw);
    margin-bottom: (15/@vw);

    img {
        width: (105/@vw);
        height: (105/@vw);
        border-radius: (8/@vw);
        margin-right: (10/@vw );
    }

    .name {
        position: relative;
        top: (7/@vw);
    }

    p {
        margin-bottom: (10/@vw);
    }

    a {
        color: #bcbec8;
        font-size: (12/@vw);
    }
}

.new {
    width: (345/@vw);
    display: flex;
    margin-top: (10/@vw);  
    margin-left: (10/@vw);
    top: (110 /@vw);
    margin-right: (16/@vw);
    left: (16/@vw);
    background-color: white;
    border-radius: (10/@vw);
    margin-bottom: (15/@vw);

    img {
        width: (105/@vw);
        height: (105/@vw);
        border-radius: (8/@vw);
        margin-right: (10/@vw );
    }

    .name {
        position: relative;
        top: (7/@vw);
    }

    p {
        margin-bottom: (10/@vw);
    }

    a {
        color: #bcbec8;
        font-size: (12/@vw);
    }
}

.rise {
    width: (345/@vw);
    display: flex;
    margin-top: (10/@vw);  
    margin-left: (10/@vw);
    top: (110 /@vw);
    margin-right: (16/@vw);
    left: (16/@vw);
    background-color: white;
    border-radius: (10/@vw);
    margin-bottom: (15/@vw);

    img {
        width: (105/@vw);
        height: (105/@vw);
        border-radius: (8/@vw);
        margin-right: (10/@vw );
    }

    .name {
        position: relative;
        top: (7/@vw);
    }

    p {
        margin-bottom: (10/@vw);
    }

    a {
        color: #bcbec8;
        font-size: (12/@vw);
    }
}

.list1 {
    display: flex;
    position: relative;
    top: (120/@vw);
    left: (16/@vw);
    width: (345/@vw);
    height: (26.5/@vw);

    h2 {
        margin-right: (200/@vw);
    }

    p {
        color: #bcbec8;
        position: relative;
        top: (5/@vw);
    }

    .arrow {
        width: (15/@vw);
        fill: #bcbec8;
        ;
        position: relative;
        top: (2/@vw);
    }

}

// 推荐歌单
.recommend {
    padding: 0 (15 / @vw);

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            margin-bottom: (16 / @vw);
            width: (105 / @vw);
            height: (143 / @vw);

            // background-color: pink;
            // 图片
            .pic {
                position: relative;
                width: (105 / @vw);
                height: (105 / @vw);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10 / @vw);
                }

                .cover {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: (70 / @vw);
                    height: (28 / @vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10 / @vw) 0 (10 / @vw);
                    text-align: center;
                    line-height: (28 / @vw);
                    color: #fff;
                    font-size: (14 / @vw);
                }
            }

            // 文字
            .txt {
                font-size: (14 / @vw);
            }
        }
    }
}